<template>
  <div>
    <div class="exclusives" ref="exclusives">
      <div>
        <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" ref="loadmore">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item of RecommendList" :key=item.id>
              <img :src="item.picUrl">
            </mt-swipe-item>
          </mt-swipe>
          <div class="exclusive" ref="exclusives">
            <h1>每日专属推荐</h1>
            <ul>
              <li v-for="item of HomeList" :key=item.id>
                <div>
                  <img v-lazy="item.picUrl">
                </div>
                <section>
                  <h2>
                  {{item.songListAuthor}}
                  <p>
                    {{item.songListDesc}}
                  </p>
                  </h2>
                </section>
              </li>
            </ul>
          </div>
          <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <span v-show="topStatus === 'loading'">Loading...</span>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import BScroll from 'better-scroll'

export default {
  name:"Recommend",
  data() {
    return {
      RecommendList:[],
      HomeList:[],
      topStatus:'drop'
    }
  },
  created() {
    // axios.interceptors.response.use((re)=>{
    //     return re.data.data.songList
    // })
    axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',{
      params:{
        _:1557061969690,
        g_tk:5381,
        uin:0,
        format:'json',
        inCharset:'utf-8',
        outCharset:'utf-8',
        notice:0,
        platform:'h5',
        needNewCode: 1
      }
    })
    .then(res=>{
      this.RecommendList=res.data.data.slider
      this.HomeList=res.data.data.songList
      console.log(res)
    })
  },
  methods: {
    loadTop() {
        axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',{
        params:{
          _:1557061969690,
          g_tk:5381,
          uin:0,
          format:'json',
          inCharset:'utf-8',
          outCharset:'utf-8',
          notice:0,
          platform:'h5',
          needNewCode: 1
        }
      })
      .then(res=>{
        this.RecommendList=res.data.data.slider
        this.HomeList=res.data.data.songList
        // console.log(res.data.data)
          this.$refs.loadmore.onTopLoaded();
      })
    },
    handleTopChange (status) {
      this.topStatus = status;
    }
  },
  mounted() {
    this.scroll=new BScroll(this.$refs.exclusives)
  },
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variable.styl';
  .exclusives
    position absolute
    overflow hidden
    top 2rem
    left 0
    right 0
    bottom 0
    .mint-swipe
      overflow hidden
      width 100%
      padding-bottom 40%
      .mint-swipe-items-wrap
        width 100%
        height 100%
        .mint-swipe-item
          width 100%
          height 100%
          img
            width 100%
    .exclusive
      h1
        margin .2rem
        color $color-text
        font-size  $font-sise-xl
        text-align center
      ul
        li
          display flex
          div
            margin 0.15rem .4rem 0.15rem .2rem
            img
              border-radius 3px
              width 2.1rem
              height 2.1rem
          section
            overflow hidden
            display flex
            align-items center
            h2
              font-size $font-sise-xl
              color $color-text
              p
                margin-top .8rem
                font-size $font-sise-md
                color $color-text-i
</style>

